1、所有的模板要被一个根节点包含起来

嵌套一个div

2、模板元素不要加引号

render(){        return(            
    
                
     
{this.state.msg}
                          
    
        )    }

3、{}绑定数据       

 

4、绑定属性注意：

      class 要变成 className   （class为关键字）

      for 要变成  htmlFor      （for为关键字）

      style属性和以前的写法有些不一样（不需要加引号）

           
    
     {this.state.title}
    
                
    
     {this.state.title}
    

5、循环数据要加key

6、组件的构造函数中一定要注意 super

  子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象

  constructor(props){        super(props);  /*用于父子组件传值  固定写法*/        this.state={            userinfo:'张三'        }    }

7、组件名称首字母大写、组件类名称首字母大写

8、JSX行内样式

    
    
     我是一个红的的 div  行内样式
    

9、引入图片，循环图片

• 转化成list2格式可以直接引用。
• 循环的元素需要指定唯一key

import React from 'react';import '../assets/css/index.css';import logo from '../assets/images/1.jpg';class News extends React.Component{    constructor(props){        super(props);        this.state={            msg:'新闻',            list:['11111111111','222222222222','3333333333333'],                                    list2:[
我是一个h2
,
我是一个h2
],            list3:[                {title:"新闻11111111"},                {title:"新闻22222"},                {title:"新闻33333333"},                {title:"新闻444444444"}            ]        }    }    render(){        let listResult=this.state.list.map(function(value,key){                return 
{value}
        })        return(            
    
                     {this.state.msg}                
                     
                     
                     
     
                               {this.state.list2}                
     
                
     
                           {listResult}                
     
                 
     
                
     
                           {                        this.state.list3.map(function(value,key){                            return (
      
{value.title}
);                        })                    }                
     
            
    
        )    }}export default News;